<template>
    <van-nav-bar title="详情页" left-text="返回" left-arrow @click-left="router.back()" :fixed="true" />
    <div style="margin-top: 40px;">
        <div class="item" @click="editSetting('change')">
            <span class="opt">
                密码修改
            </span>
            <div class="right" >
                <svg class="icon iconfont" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
        </div>
        <div class="item" @click="editSetting('logoff')">
            <span class="opt">
                账号注销
            </span>
            <div class="right">
                <svg class="icon iconfont" aria-hidden="true">
                    <use xlink:href="#icon-youjiantou"></use>
                </svg>
            </div>
        </div>
        <div class="logout">
            <van-button plain hairline type="danger" style="width: 80%;" @click="logout">退出登录</van-button>
        </div>
    </div>
    <van-dialog :show="state.show" :title="state.type == 'change' ? '修改密码' : '注销'" :showConfirmButton="false"
        show-cancel-button @cancel="state.show=false">
        <van-form @submit="checkpassword">
            <van-cell-group inset>
                <!-- 通过 pattern 进行正则校验 -->
                <van-field label="原密码" required v-model="state.oldpassword" name="name" placeholder="请输入原密码"
                    :rules="[{ pattern: state.passwordRegex, message: '密码至少包含数字和英文,长度6-20' }]" />
                <van-field v-if="state.type == 'change'" label="新密码" required v-model="state.newpassword" name="idNo"
                    placeholder="请输入新密码" :rules="[{ pattern: state.passwordRegex, message: '密码至少包含数字和英文,长度6-20' }]" />
                <van-field v-if="state.type == 'change'" label="确认新密码" required v-model="state.confirmpassword"
                    name="idNo" placeholder="请确认新密码"
                    :rules="[{ pattern: state.passwordRegex, message: '密码至少包含数字和英文,长度6-20' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </van-dialog>
</template>

<script setup lang='ts'>
import router from '@/router'
import { reactive } from 'vue';

const state = reactive({
    show: false,
    type: 'change',
    newpassword: '',
    confirmpassword: '',
    oldpassword: '',
    passwordRegex: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/
})
const logout = () => {
    localStorage.removeItem('accessToken')
    localStorage.removeItem('userInfo')
    router.push('/login')
}

const editSetting = (type: string) => {
    state.type = type
    state.show = true
}

const checkpassword = () => {

}
</script>

<style lang='less' scoped>
.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;

    span {
        text-align: center;
        font-weight: 600;
    }

    .right {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        .arrow {
            width: 1rem;
            height: 1rem;
        }
    }

    position: relative;
    height: 3rem;

    .img {
        width: 2rem;
        height: 2rem;
        border-radius: 0.5rem;
    }
}

.item::after {
    content: '';
    width: 90%;
    position: absolute;
    height: 1px;
    transform: scale(1, 0.5);
    background: #d7d5d5;
    left: 4%;
    bottom: 0;
}

.logout {
    width: 100%;
    margin-top: 20px;
    text-align: center;
    height: 60px;
}
</style>
